<template>
  <div id="Smiddle">
    <div class="shang">
      <div class="jubao5" v-for="item in navList" :key="item.id">
        <router-link :to="item.path">
          <span :class="['iconfont', item.icon]"></span>
          {{ item.name }}
        </router-link>
      </div>
      <!-- <div class="jubao5">
        <span class="iconfont icon-yuyinzhushou"></span>
        报案助手
      </div>
      <div class="jubao5">
        <router-link to="/Laidian">
          <span class="iconfont icon-yujing"></span>
          来电预警
        </router-link>
      </div>  
      <div class="jubao5">
        <span class="iconfont icon-shenfenheshi"></span>
        身份核实
      </div> -->
    </div>

    <div id="fengxian">
      <b> 风险自查</b>
      <div class="fxzj">
        <div class="zijian" v-for="item in fengxian" :key="item.id">
          <div class="left">
            <router-link to="/Fengxianchaxun">
              <a>{{ item.name }}</a>
              <a>{{ item.name2 }}</a>
            </router-link>
          </div>
          <div class="righe">
            <span :class="['iconfont', item.icon]"></span>
          </div>
        </div>

        <!-- <div class="zijian">
          <div class="left">
             <router-link to="/Fengxianchaxun">
              <a>风险查询</a>
              <a>支付社交账号核实</a>
            </router-link>
          </div>
          <div class="righe"><span class="iconfont icon-self-test"></span></div>
        </div> -->
      </div>

      <b> 最新动态</b>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      navList: [],
      fengxian: [],
    };
  },
  created() {
    this.getList(), this.getfengxian();
  },
  methods: {
    getList() {
      axios({
        url: "http://localhost:3000/navList",
      }).then((res) => {
        // 把后端的数据赋给了navlist
        // console.log(res.data);
        this.navList = res.data;
        console.log(this.navList, "navList");
      });
    },
    getfengxian() {
      axios({
        url: " http://localhost:3000/fengxian",
      }).then((res) => {
        // 把后端的数据赋给了fengxian
        // console.log(res.data);
        this.fengxian = res.data;
        console.log(this.fengxian, "fengxian");
      });
    },
  },
};
</script>

<style>
#Smiddle {
  height: 14rem;
  display: flex;
  flex-direction: column;
}

.shang {
  height: 4.5rem;
  margin-top: 10px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#Smiddle .jubao5 {
  width: 23%;
  height: 4.5rem;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#Smiddle .jubao5 a {
  text-decoration: none;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
#Smiddle .jubao5 span:nth-child(1) {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: #fff;
  background-color: rgb(8, 61, 139);
  display: flex;
}

#fengxian {
  margin-top: 0.625rem;
  height: 9rem;
  display: flex;
  flex-direction: column;

  justify-content: space-between;
}

#fengxian b {
  display: block;
  height: 2.5rem;
  display: flex;
  align-items: center;
}
.fxzj {
  height: 4rem;
  display: flex;

  justify-content: space-between;
}

.zijian {
  width: 49%;
  height: 4rem;
  font-size: 12px;
  background-color: #fff;

  display: flex;

  justify-content: space-between;
}

.left {
  width: 70%;
  height: 4rem;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.left a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.left a:nth-child(2) {
  color: rgb(80, 79, 79);
}

#fengxian .righe span {
  color: rgb(8, 71, 243);
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgb(115, 133, 211);
  border-bottom-left-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
